<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../plugin/layui/css/layui.css"/>
</head>
<body>
<div class="layui-carousel" id="run-view">
    <div carousel-item="">
        <div><img src="//res.layui.com/images/layui/demo/1.png"></div>
        <div><img src="//res.layui.com/images/layui/demo/2.png"></div>
    </div>
</div>
<div class="layui-progress" lay-filter="run-data" style="margin-top: 2px">
    <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
</div>
<script type="text/javascript" src="../plugin/layui/layui.js"></script>
<script>
    layui.use(['carousel', 'element'], function () {
        var element = layui.element;
        var carousel = layui.carousel;
        carousel.render({
            elem: '#run-view',
            width: '100%',
            height: '590px',
            arrow: 'always'
        });
        run(element);
    });

    function run(element) {
        var n = 0, timer = setInterval(function () {
            n = n + Math.random() * 10 | 0;
            if (n > 100) {
                n = 100;
                clearInterval(timer);
            }
            element.progress('run-data', n + '%');
        }, Math.random() * 100);
    }

</script>
</body>
</html>